<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bit.ly Button - Demo</title>
<!-- Not needed, just for Demo page ! -->
<link href='demo.css' rel='stylesheet' type='text/css'/>
<!-- Not needed, just for Demo page ! -->

<!-- Include JS file once in your page after jQuery JS file -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bitly-button.googlecode.com/files/jquery.bitly-button-1.0.min.js"></script>
<script type="text/javascript">
	// you may set your bit.ly login and API key 
	//$.fn.bitlyButton.defaults.login = '';
	//$.fn.bitlyButton.defaults.api_key = '';
	$.fn.bitlyButton.defaults.debug= 1;
</script>
<!-- Include JS file once in your page after jQuery JS file -->
</head>
<body>
	<h1>Bit.ly Button - Demo</h1>
	
	<div class="cell1">
		<h3>1. Default Options - Current Page URL</h3>
		
		<!-- required HTML -->
		<a class="bitly-button" href="http://twitter.com">Retweet</a>
		<!-- required HTML :END -->
	</div>
	
	<div class="cell2">
		<h3>2. <A href="http://www.moretechtips.net/2010/07/quite-delicious-button-jquery-plugin.html">Custom URL</a> - Options in [data-button] Attribute</h3>
		
		<!-- required HTML -->
		<a class="bitly-button" href="http://twitter.com" data-button="{
			url:'http://www.moretechtips.net/2010/07/quite-delicious-button-jquery-plugin.html'
			,title:'Quite Delicious Button - A jQuery Plugin'
			,nick:'mike_more'
		}">Retweet</a>
		<!-- required HTML :END -->
	</div>
	
	<div class="cell1">
		<h3>3. Wide Button - <A href="http://www.moretechtips.net/2009/12/who-tweet-button-fancy-jquery-plugin.html">Custom URL</a> - Options in HTML Comment</h3>
		
		<!-- required HTML -->
		<a class="bitly-button" href="http://twitter.com">
			<!-- { 
				url:'http://www.moretechtips.net/2009/12/who-tweet-button-fancy-jquery-plugin.html'
				,title:'Who-Tweet Button : Fancy jQuery Plugin for Twitter'
				,button:'wide'
			} -->
			Retweet
		</a>
		<!-- required HTML :END -->
	</div>
	
	<div class="cell2">
		<h3>4. Wide Button - <a href="http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html">Custom URL</a> - Options in jQuery Call</h3>
		<!-- 2 Extra requests to the API are made because this button is loaded in a separate call -->
		
		<!-- required HTML & JS -->
		<a class="bitly-button-2" href="http://twitter.com">Retweet</a>
		
		<script type="text/javascript">
		$(document).ready(function(){
			$('a.bitly-button-2').bitlyButton({
				url:'http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html'
				,title:'Google Buzz Widget - A jQuery Plugin'
				,button:'wide'
			});
		});
		</script>
		<!-- required HTML & JS :END -->
	</div>
	
	<div id="footer">
		<div class='ad'>
			<script type="text/javascript">google_ad_client = "pub-9464686146570738";google_ad_slot = "6604226947";google_ad_width = 468;google_ad_height = 60;</script>
			<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
		</div>

		<a class="icon" href="http://www.moretechtips.net/" title="More Tech Tips!"></a>
		<a class="link" href="http://www.moretechtips.net/2010/07/bitly-button-jquery-plugin-for-your.html">Back to post</a>
	</div>
	<script type="text/javascript">
  	var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-5465067-14']);  _gaq.push(['_trackPageview']);
  	(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
	</script>
</body>
</html>
